<template>
	<view class="wp" id="page_wp">
		
		<view class="list">
			<view class="shop" v-for="item in list">
				<view class="shop_item" @click="$navTo('/pages/product/product?id='+item.id)">
					<view class="s_image">
						<image :src="item.thumb"></image>
					</view>
					<view class="content">
						<view class="c_title"><text>{{item.title}}</text></view>
						<view class="money">
							<text class="new">￥{{item.agentprice}}</text>
							<text class="old">￥{{item.productprice}}</text>
						</view>
						<view class="shoptitle">{{item.shopName}}</view>
					</view>
				</view>
				<view class="time">
					<view class="t">
						<text v-if="idx==1">距结束</text>
						<text v-if="idx==2">距开始</text>
						<uni-countdown :show-day="false" :hour="hour(item.times)" :minute="minute(item.times)"
						:second="second(item.times)" :font-size="12" color="#FFFFFF" background-color="#000" />
					</view>
					<text class="s_shar" :style="{background:bg}" @click="$navTo('/pages/product/product?id='+item.id)">立即购买</text>
				</view>
			</view>
			
		</view>
		<view v-if="list.length<=0" class="" style="text-align: center;padding: 20upx;color: #4399fc;">
			空空如也~
		</view>
	</view>
</template>

<script>
	export default {
		name: 'shop_list',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			bg: {
				type: String,
				default: '#303133'
			},
			val: {
				type: [Number, String],
				default: 2
			},
			isFixed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				idx: 1,
				isFixed: false,
				top: 0,
				height: 0,
				lastHeight: 0,
			}
		},
		mounted(){	
			var that = this;
			var barHeight;
			uni.getSystemInfo({
				success:(e)=>{
					barHeight = e.statusBarHeight;
				}
			})
			// uni.$on('onPageScroll', () => {
			// 	let query = uni.createSelectorQuery().in(that);
			// 	query.select('#page_wp').boundingClientRect(data => {
			// 		that.isFixed = data.top <= 105+barHeight ? true : false;
			// 	}).exec();
			// })
		},
		methods: {
			tabTao(v) {
				if (this.idx === v) return;
				this.idx = v;
				this.$emit('change', v);
			},
			second(v) {
				return Math.trunc(v % 60);
			},
			minute(v) {
				return Math.trunc(v / 60 % 60);
			},
			hour(v) {
				return Math.trunc(v / 60 / 60 % 24);
			},
			day(v) {
				return Math.trunc(v / 60 / 60 / 24);
			}
		},
	}
</script>

<style lang="scss">
	.fixed {
	    // background: #f2f2f2;
	    position: fixed;
	    top: 0;
		// padding-top: ;
	    // padding-top: calc(var(--status-bar-height));
		// padding-top: calc(var(--status-bar-height) + 210rpx);
	    width: 100%;
	    z-index: 900;
		left: 0;
		padding-top: calc(var(--status-bar-height) + 106rpx);
	  }
	.wp {
		// border-radius: 20upx;
		// overflow: hidden;
		// padding-top: 210rpx;
		.nav_title {
			background: #fff;

			.n_item {
				display: inline-block;
				letter-spacing: 1px;
				padding: 30upx 0;
				text-align: center;
				width: calc(100%/2);

				.bar {
					font-weight: bold;
				}

				.message {
					border: 1px #f8f8f8 solid;
					border-radius: 30upx;
					background: #f8f8f8;
					color: #666;
					display: inline-block;
					padding: 0 10upx;
					font-size: 22upx;
				}
			}
		}

		.list {
			
			.shop{
				background-color: #fff;
				border-radius: 20upx;
				padding: 10rpx;
				margin-bottom: 20upx;
			}
			.title {
				display: flex;
				padding-bottom: 20upx;

				image {
					border-radius: 5px;
					border: 1px #EBEEF5 solid;
					width: 100upx;
					height: 100upx;
					vertical-align: top;
				}

				.right {
					display: inline-block;
					line-height: 50upx;
					margin-left: 10upx;
					width: calc(100% - 210upx);
				}

				.y {
					color: #000;
					font-size: 30upx;

					.l {
						background: linear-gradient(90deg, #fcc453, #bc7621);
						border-radius: 30upx;
						font-size: 22upx;
						padding: 0 10upx;
						margin-right: 10upx;
					}
				}

				.l {
					overflow: hidden;
					white-space: nowrap;

					text {
						border: 1px #fff solid;
						font-size: 22upx;
						padding: 0 10upx;
						margin-right: 10upx;
					}
				}
			}

			.shop {
				.shop_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.s_image {
						width: 160rpx;
						height: 160rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.content{
						flex: 1;
						padding-left: 20rpx;
						.c_title{
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							margin-bottom: 10rpx;
							line-height: 1.5;
							text{
								word-wrap: break-all;
								white-space: pre-line;
							}
						}
						.shoptitle{
							color:#999;
						}
						.new {
							color: #fa436a;
							text-align: center;
							font-size: 32rpx;
							font-weight: bold;
							line-height: 30upx;
							padding: 20upx 0 0;
							margin-right: 10rpx;
						}
						.old{
							font-size: 22rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
				.shop_item:nth-of-type(3n + 2) {
					margin: 0 30upx;
				}
			}

			.time {
				font-size: 24rpx;
			}

			.time,
			.t {
				display: flex;
				align-items: center;
			}

			.t {
				color: #666;
				flex: 1;

				text {
					margin-right: 15upx;
				}
			}

			.s_shar {
				background: rgb(255, 20, 58);
				border-radius: 30upx;
				color: #fff;
				font-size: 26upx;
				padding: 4upx 20upx;
				letter-spacing: 1px;
				margin-top: -16rpx;
			}
		}

	}

	.shar_img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 600;
	}
</style>